<template>
	<view class="dormitory_box">
		<Tips/>
		<scroll-view scroll-y="true" class="scroll-Y" :show-scrollbar="true" @scroll="scrollFun">
			<view class="header">
				<view class="cover">
					<view class="img_box">
						<image
							class="img"
							:style="`width:${imgSize}; height: ${imgSize};`"
							mode="aspectFill" 
							:src="joinDormitoryCover(dormitoryInfo.dormitory.dormitory_cover_url)"/>
					</view>
					<view class="dormtiory_name text_ellipsis">
						{{dormitoryInfo.dormitory.dormitory_name}}
					</view>
					<view class="dormitory_illustration">
						<image
							style="width: 100%; height: 100%;" 
							mode="aspectFit"
							:src="joinSystemPath('goHome.png')"/>
					</view>
				</view>
				<view class="info">
					<view class="item">
						<view class="title">
							管理
						</view>
						<view class="content">
							<Avatar
								:fileName="dormitoryInfo.admin.user_avatar" 
								size="70rpx"/>
							<view class="name text_ellipsis" style="marginLeft: 20rpx">
								{{dormitoryInfo.admin.nick_name_by_dormitory}}
							</view>
						</view>
					</view>
					<view class="item">
						<view class="title text_ellipsis">
							我在本宿舍昵称
						</view>
						<view class="content">
							<view class="name text_ellipsis">
								{{dormitoryInfo.user.nick_name_by_dormitory}}
							</view>
						</view>
					</view>
					<view class="item" v-if="!isDeleteingDormitory">
						<view class="title">
							总成员
						</view>
						<view class="content">
							<view class="name text_ellipsis">
								{{changeNums(newJoinerData.length)}}人
							</view>
						</view>
					</view>
					<view class="item" v-else>
						<view class="title">
							宿舍即将解散
						</view>
						<view class="content">
							<view class="text_ellipsis">
								{{deleteDormitoryJobInfo?.cronOrTime}}
							</view>
						</view>
					</view>
				</view>
				<view class="dormitory_data">
					<DromitoryOrtherData
						:newJoinerData="newJoinerData.slice(0,10)" 
						:balance="dormitoryInfo.balance" 
						:billNums="dormitoryInfo.billNums"/>
				</view>
			</view>

			<view class="joiner">
				<DormitoryJoiner :queryData="dormitoryAllId" :isScrollLower="isScrollLower"/>
			</view>
			<view class="application">
				<DomitoryApplication :dormitoryInfo="dormitoryInfo"/>
			</view>
			<view class="footer_info">
				软著登记号：2023SR0885742
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onShareAppMessage,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		onMounted,
		getCurrentInstance,
		watch,
		nextTick
	} from "vue"
	
	import Avatar from '@/components/Avatar/Avatar.vue'
	import Tips from '@/components/Tips/Tips.vue'
	import DormitoryJoiner from '@/components/Dormitory/DormtioryJoiner/DormitoryJoiner.vue'
	import DromitoryOrtherData from '@/components/Dormitory/DormitoryOrtherData/DormitoryOrtherData.vue'
	import DomitoryApplication from '@/components/Dormitory/DomitoryApplication/DomitoryApplication.vue'
	
	import {
		joinSystemPath,
		joinAvatarPath,
		joinDormitoryCover
	} from '@/utils/imgJoinName.js'
	import {
		changeNums
	} from '@/utils/changeData.js'
	import {
		getUrlParam
	} from '@/utils/joinParamsUrl.js'

	import {
		dynamicStyleStore
	} from '@/stores/dynamicStyle.js'
	import {userStore} from '@/stores/user'
	
	import {
		DormitoryModel
	} from '@/service/model/dormitory.js'

	const dynamicStyle_store = dynamicStyleStore()
	const user_store=userStore()
	const dormitoryModel = new DormitoryModel()
	const dormitoryAllId = uni.getStorageSync('homeData')

	const {
		primary_hot_color,
		primary_main_bgc,
		dormitory_cover_border_color,
		primary_text_color,
		primary_text_hot_color,
		info_bgc,
		dormitory_name_color,
		joiner_bgc,
		dormitory_data_bgc
	} = dynamicStyle_store.dormitoryStyle

	const headerTransition = 'all .3s linear'

	const coverWidth = ref('50%')
	const coverHeight = ref('45%')
	const coverbackgroundColor = ref(primary_hot_color)
	const coverBorderRedius = ref('20rpx')

	const infoWidth = ref('50%')
	const infoHeight = ref('45%')
	const infobackgroundColor = ref(info_bgc)
	const infoLeft = ref('50%')
	const infoTop = ref('0')

	const joinerMarginTop = ref('0')

	const dormitoryDataLeft = ref('-100%')
	const dormitoryDataTop = ref('100%')
	
	const coverImgWidth=ref('100%')
	const coverImgHeight=ref('50%')
	const coverImgLeft=ref('50%')
	
	const dormitoryNameWidth=ref('90%')
	const dormitoryNameTransform=ref('translate(0%,0%)')
	const dormityoryNameLeft=ref('0%')
	const dormitoryNameTextAlign=ref('center')
	const dormitoryNameColor=ref(dormitory_name_color)
	const dormitoryNameTop = ref('47%')
	
	const dormitoryIllustrationDisplay=ref('block')
	
	const imgSize=ref('200rpx')
	const imgTransform=ref('translate(-50%,-50%)')
	
	const padding='20rpx'

	const scrollHeight = ref()
	const scrollTop = ref()
	const firstScrolled = ref()
	const isScrollLower=ref(false)
	
	const testValue = ref(0)

	const init = () => {
		scrollHeight.value = 0
		scrollTop.value = 0
		firstScrolled.value = false
		newJoinerData.value=[]
	}

	//屏幕滚动逻辑
	const scrollFun = (e) => {
		const {
			deltaY: _deltaY,
			scrollHeight: _scrollHeight,
			scrollTop: _scrollTop
		} = e.detail

		if (!firstScrolled.value) {
			scrollHeight.value = _scrollHeight
			scrollTop.value = _scrollTop
			firstScrolled.value = true
		}
		testValue.value = _scrollTop
		//向上滚动或者已经到顶部了
		if (_scrollTop <= 8) {
			coverbackgroundColor.value = primary_hot_color
			coverWidth.value = `50%`
			coverHeight.value = `45%`
			infoHeight.value = `45%`
			infoWidth.value = '50%'
			infoLeft.value = '50%'
			infoTop.value = '0'
			joinerMarginTop.value = '0'
			dormitoryDataLeft.value = '-100%'
			dormitoryDataTop.value = '100%'
			coverImgWidth.value = '100%'
			imgSize.value='200rpx'
			coverImgHeight.value='50%'
			dormitoryNameWidth.value='90%'
			dormitoryNameTransform.value='translate(0,0%)'
			imgTransform.value='translate(-50%,-50%)'
			dormityoryNameLeft.value='0%'
			dormitoryNameTextAlign.value='center'
			coverImgLeft.value='50%'
			dormitoryNameTop.value='47%'
			dormitoryIllustrationDisplay.value='block'
			isScrollLower.value=false
			coverBorderRedius.value ='20rpx'
		} else { //向下滚动
			coverWidth.value = '100%'
			coverHeight.value = `10%`
			infoLeft.value = '100%'
			infoTop.value = '-10%'
			infoHeight.value="20%"
			joinerMarginTop.value = '-17.5%'
			dormitoryDataLeft.value = '0'
			dormitoryDataTop.value = '30%'
			coverImgWidth.value = '35%'
			imgSize.value = '80rpx'
			coverImgHeight.value='100%'
			dormitoryNameWidth.value='40%'
			dormitoryNameTransform.value='translate(0,-50%)'
			imgTransform.value='translate(-50%,-50%)'
			coverImgLeft.value='85%'
			dormityoryNameLeft.value='45%'
			dormitoryNameTextAlign.value=''
			dormitoryNameTop.value = '50%'
			dormitoryIllustrationDisplay.value='none'
			isScrollLower.value=true
			coverBorderRedius.value ='0'
		}
		// console.log('一次性纵轴位移', _deltaY)
		// console.log('屏幕高度', _scrollHeight)
		// console.log('垂直滚动条位置', _scrollTop)
	}
	
	const unChooseDormitoryTip = '还未选择宿舍'
	//宿舍基本信息以及自己的关系信息
	const dormitoryInfo = ref({
		"dormitory": {
			"id": "877f9815e4afc5559a316f4d4cce086c",
			"user_id": "80efb504869290c53cd356a9803f07a5",
			"descript": "这是一段描述",
			"dormitory_name": unChooseDormitoryTip,
			"2022-12-19 10:53:43": "2022-12-19 10:53:43.000000",
			"dormitory_cover_url": "dormitory_cover_init_2.jpg"
		},
		"user": {
			"id": "cc4f6ec8718fb04f4abb18ca40f49086",
			"user_id": "80efb504869290c53cd356a9803f07a5",
			"2022-12-19 10:53:43": "2022-12-19 10:53:43.000000",
			"nick_name_by_dormitory": unChooseDormitoryTip
		},
		"admin": {
			"user_id": "80efb504869290c53cd356a9803f07a5",
			"user_avatar": "avatar_init_3.jpg",
			"nick_name_by_dormitory": unChooseDormitoryTip
		},
		"balance": "0.00",
        "billNums": 0
		})
	//获取宿舍解散任务信息
	const deleteDormitoryJobInfo=ref()
	const getDeleteDormitoryFun=async()=>{
		const {data,success} = await dormitoryModel.getDeleteDormitory({},dormitoryAllId.dormitory_id)
		if(success){
			deleteDormitoryJobInfo.value = data
		}
	}
	const isDeleteingDormitory=ref(false)
	const getDormitoryInfoFun=async(relationId,dormitoryId)=>{
		const {data,success} = await dormitoryModel.getDormitoryInfo({},relationId,dormitoryId)
		if(success){
			dormitoryInfo.value = data
			if(data.dormitory.state === 3){
				isDeleteingDormitory.value = true
				nextTick(()=>{
					getDeleteDormitoryFun()
				})
			}else{
				isDeleteingDormitory.value = false
			}
		}
	}
	
	//宿舍最新加入者
	const newJoinerData = ref([
		{
			"user_id": "80efb504869290c53cd356a9803f07a5",
			"nick_name_by_dormitory": unChooseDormitoryTip,
			"user_avatar": "avatar_init_3.jpg"
		},
		{
			"user_id": "fcec462df61169a27f7213e41e265b3d",
			"nick_name_by_dormitory": unChooseDormitoryTip,
			"user_avatar": "avatar_init_3.jpg"
		}
	])
	const getNewJoinerDataFun=async(dormitoryId)=>{
		const {data,success} = await dormitoryModel.getNewJoiner({},dormitoryId)
		if(success){
			newJoinerData.value = data
		}
	}
	
	const initDormitory=()=>{
		const {relation_id,dormitory_id} = dormitoryAllId
		
		if(relation_id && uni.getStorageSync('token')){
			getDormitoryInfoFun(relation_id,dormitory_id)
			getNewJoinerDataFun(dormitory_id)
		}
	}
	
	onShareAppMessage((res)=>{
		return {
		  title: '您的宿舍好帮手',
		  path: `/pages/Dormitory/Dormitory`,
		  mpPath:`/pages/Dormitory/Dormitory`
		}
	})
	
	watch(()=>user_store.userInfo?.id,()=>{
		init()
		initDormitory()
	})

	onShow(()=>{
		init()
		initDormitory()
	})
	onLoad((opt)=>{
		if(opt.q){
			let url = decodeURIComponent(opt.q)
			const obj = getUrlParam(url)
			console.log('数据',obj)
			const {
				publicity_id,
				dormitory_id,
				isPublicity
			} = obj
			if(publicity_id && isPublicity==='yes'){
				uni.setStorageSync('newUserActive',{
					publicity_id
				})
			}else if(dormitory_id && isPublicity==='no'){
				uni.navigateTo({
					url:`/pages/Dormitory/DormitoryInvite/DormitoryInvite?dormitory_id=${dormitory_id}`
				})
			}
		}
	})
</script>

<style lang="less">
	.scroll-Y {
		height: calc(100vh);
	}
	.text_ellipsis{
		white-space:nowrap;
		text-overflow:ellipsis;
		overflow: hidden;
	}

	.dormitory_box {
		height: calc(100vh);
		.header {
			width: 100%;
			height: 45%;
			position: relative;
			z-index: 2;
			overflow: hidden;
			.cover {
				width: v-bind(coverWidth);
				height: v-bind(coverHeight);
				background-color: v-bind(coverbackgroundColor);
				position: fixed;
				left: 0;
				top: -1rpx;
				transition: v-bind(headerTransition);
				z-index: 2;
				display: flex;
				flex-wrap: wrap;
				border-radius: 0 0 v-bind(coverBorderRedius) 0;
				.img_box{
					width: v-bind(coverImgWidth);
					height: v-bind(coverImgHeight);
					background-color: v-bind(coverbackgroundColor);
					transition: v-bind(headerTransition);
					position: relative;
					z-index: 2;
					.img{
						border: 4rpx solid v-bind(dormitory_cover_border_color);
						background-color: v-bind(dormitory_cover_border_color);
						position: absolute;
						left: v-bind(coverImgLeft);
						top:50%;
						transform: v-bind(imgTransform);
						border-radius: 50%;
						transition: v-bind(headerTransition);
					}
				}
				.dormtiory_name{
					width: v-bind(dormitoryNameWidth);
					position: absolute;
					top: v-bind(dormitoryNameTop);
					left: v-bind(dormityoryNameLeft);
					transform: v-bind(dormitoryNameTransform);
					z-index: 2;
					text-align:v-bind(dormitoryNameTextAlign);
					padding: v-bind(padding);
					transition: v-bind(headerTransition);
					color: v-bind(dormitoryNameColor);
					font-size: 40rpx;
				}
				.dormitory_illustration{
					width: 100%;
					height: 35%;
					display: v-bind(dormitoryIllustrationDisplay);
					transition: v-bind(headerTransition);
				}
			}

			.info {
				width: v-bind(infoWidth);
				height: v-bind(infoHeight);
				background-color: v-bind(infobackgroundColor);
				position: fixed;
				left: v-bind(infoLeft);
				top: v-bind(infoTop);
				z-index: 1;
				transition: v-bind(headerTransition);
				padding-right: v-bind(padding);
				display: flex;
				flex-wrap: wrap;
				align-items: space-around;
				.item{
					margin: 20rpx;
					max-width: 95%;
					.title{
						color: v-bind(primary_text_color);
						font-size: 38rpx;
					}
					.content{
						color: v-bind(primary_text_hot_color);
						font-size: 30rpx;
						display: flex;
						align-items: center;
						.name{
							// margin-left: 20rpx;
							width: 70%;
						}
					}
				}
			}

			.dormitory_data {
				width: 100%;
				height: 70%;
				background-color: v-bind(dormitory_data_bgc);
				position: absolute;
				top: v-bind(dormitoryDataTop);
				left: v-bind(dormitoryDataLeft);
				z-index: 1;
				transition: v-bind(headerTransition);
			}
		}

		.joiner {
			background-color: v-bind(joiner_bgc);
			height: 220rpx;
			z-index: 3;
			transition: v-bind(headerTransition);
		}

		.application {
			background-color: #FFFFFF;
			min-height: 55%;
			z-index: 3;
			padding: v-bind(padding);
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		.footer_info{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 40rpx;
			font-size: 24rpx;
			color: v-bind(primary_text_color);
		}
	}
</style>
